<template>
	<view class="box">
		<view class="my_head">
			<image :src="user.avatar?user.avatar:'../../static/avatar.webp'" mode="" @click="handleToSpace"></image>
			<view class="info" v-if="isLogin" >
				<view class="info_name" @click="handleToSpace">
					<view class="name one-text-ellipsis">
						<mote-lines-divide :dt="user.nickname?user.nickname:user.username" :line="1" :fontSize="36"/>
					</view>
					<view class="sex">{{user.sex}}</view>
				</view>
				<view class="info_desc">
					<mote-lines-divide :dt="user.desc" :line="1"/>
				</view>
			</view>
			<view class="toLogin" v-else @click="handletoLogin">立即登录，体验更多功能</view>
			<view class="button" @click="handleToSetting">
				<view class="iconfont iconshezhi" style="font-size: 38rpx;"></view>
			</view>
		</view>
		<view class="separation-line"></view>
		<view class="main">
			<view class="main-item" @click="handleToList('video')">
				<view class="iconfont iconshipin icon"></view>
				<view class="text">作品</view>
				<view class="num">{{user.videoCount}}</view>
				<view class="iconfont iconjinru right"></view>
			</view>
			<view class="main-item" @click="handleToList('fava')">
				<view class="iconfont iconshoucang1 icon"></view>
				<view class="text">收藏</view>
				<view class="num">{{user.favaCount}}</view>
				<view class="iconfont iconjinru right"></view>
			</view>
			<view class="main-item" @click="handleToList('follow')">
				<view class="iconfont iconguanzhu icon"></view>
				<view class="text">关注</view>
				<view class="num">{{user.followCount}}</view>
				<view class="iconfont iconjinru right"></view>
			</view>
			<view class="main-item" @click="handleToList('fens')">
				<view class="iconfont iconwode icon" style="font-size: 38rpx;"></view>
				<view class="text">粉丝</view>
				<view class="num">{{user.fenCount}}</view>
				<view class="iconfont iconjinru right"></view>
			</view>
			<view class="main-item">
				<view class="iconfont iconlishi icon"></view>
				<view class="text">足迹</view>
				<view class="iconfont iconjinru right"></view>
			</view>
		</view>
		<view class="separation-line" style="margin-bottom: 50rpx;"></view>
		<MainBigButton @click="handleUpload">立即投稿</MainBigButton>
		<uni-popup ref="popup" type="bottom"  @change="handleMaskClick" >
			<view class="popup_box" >
				<view class="choose" @click="handleToCreate">
					<view class="item">
						<view class="icon iconfont icondingdanwenjian" style="background-color: #007bff;"></view>
						<view class="">单集</view>
					</view>
					<view class="item">
						<view class="icon iconfont icon918caidan_wenjian" style="background-color: #FB7299;"></view>
						<view class="">连载</view>
					</view>
				</view>
				<view class="footer">
					<view class="separation-line"></view>
					<view class="cancel" @click="handleHide">取消</view>
				</view>
			
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MoteLinesDivide  from '@/components/mote-lines-divide/mote-lines-divide.vue'
	import MainBigButton from '@/components/common/main-big-button.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			MainBigButton,
			uniPopup,
			MoteLinesDivide
		},
		data() {
			return {
				user: {
					avatar: '',
					desc: '',
					sex: '',
					nickname: '',
					username: '',
					favaCount: '',
					fenCount: '',
					followCount: '',
					videoCount: ''
				},
				isLogin: false

			};
		},
		methods: {
			handleToSpace(){
				uni.navigateTo({
					url:`/pages/user-space/user-space?user_id=${this.user.id}`
				})
			},
			handleToCreate(){
				uni.navigateTo({
					url:'/pages/create/create'
				})
			},
			handleMaskClick(e){
				console.log(e)
				if(e.show===false){
					uni.showTabBar();
				}
			},
			handleHide(){
				this.$refs.popup.close()
				uni.showTabBar();
			},
			handleUpload() {
				this.$refs.popup.open()
				uni.hideTabBar();
			},
			handleToList(type) {
				uni.navigateTo({
					url: `/pages/list/list?type=${type}&user_id=${this.user.id}`
				})
			},
			handleToSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			handletoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		onShow() {
			this.$H.get('/user/user_info', {
				token: true,
				noJump: false,
				toast: true
			}).then(res => {
				this.isLogin = true
				this.user = res.user
				this.user.favaCount = res.favaCount === 0 ? '' : res.favaCount
				this.user.fenCount = res.fenCount === 0 ? '' : res.fenCount
				this.user.followCount = res.followCount === 0 ? '' : res.followCount
				this.user.videoCount = res.videoCount === 0 ? '' : res.videoCount
			}).catch(err => {
				this.isLogin = false
				for (let key in this.user) {
					this.user[key] = ''
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.my_head {
			display: flex;
			align-items: center;
			margin: 30rpx 0;
			padding: 0 10rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.info {
				display: flex;
				flex: 1;
				flex-direction: column;

				.info_name {
					display: flex;
					align-items: center;

					.name {
						max-width: 400rpx;
						font-size: 36rpx;
						margin-right: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.sex {
						margin-left: 20rpx;
						width: 486rpx;
						width: 64rpx;
					}
				}

				.info_desc {
					width: 476rpx;
				}
			}

			.toLogin {
				flex: 1;
			}

			.button {
				display: flex;
			}
		}

		.main {
			padding: 16rpx 10rpx;

			.main-item {
				height: 80rpx;
				display: flex;
				align-items: center;

				.icon {
					margin-right: 36rpx;
					font-size: 36rpx;
				}

				.text {
					flex: 1;
					font-size: 34rpx;
				}

				.num {
					margin-right: 10rpx;
					color: #6c757d;
				}

				.right {
					color: #a9a5a9;
				}
			}
		}
		
		.popup_box{
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #fff;
			// margin-top: -100rpx;
			.choose{
				display: flex;
				align-items: center;
				height: 200rpx;
				// border: 1px solid #000;
				.item{
					line-height: 200rpx;
					display: flex;
					align-items: center;
					flex: 1;
					flex-direction: column;
					.icon{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						line-height: 80rpx;
						text-align: center;
						color: #fff;
						margin-bottom: 6rpx;
					}
				}
			}
			.footer{
				z-index: 9999999;
				.cancel{
					height: 80rpx;
					line-height: 80rpx;
					color: #6c757d;
					font-size: 34rpx;
					text-align: center;
					// border: 1px solid #000;
				}
			}
			
		}

	}
</style>


